<template>
  <div class="insp">
    <div class="insp-header">
      <div class="flexBetween">
        <div class="flex insp-header-left">
          <el-select v-model="bridgeValue" placeholder="请选择桥梁" size="small" style="width: 180px" class="mRight10" clearable>
            <el-option v-for="item in bridgeOptsAll" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
          <el-input placeholder="请输入巡检记录名称" v-model="historyName" size="small" style="width: 180px" class="mRight10" clearable> </el-input>
          <el-select v-model="historyStatus" placeholder="请选择处理状态" size="small" style="width: 140px" class="mRight10" clearable>
            <el-option v-for="item in historyStatusOpts" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
          <el-button type="primary" size="small" @click="queryForPage(1)"> 查询 </el-button>
        </div>
        <!-- <div class="insp-header-right">
          <el-button size="small" class="insp-btn-add" icon="el-icon-plus" @click="handleAdd">新增巡检记录</el-button>
        </div> -->
      </div>
    </div>

    <div class="insp-content">
      <div class="insp-table">
        <el-table
          :data="tableData"
          stripe
          :header-cell-style="{
            background: '#8595B9',
            color: '#fff',
            height: '44px',
          }"
          max-height="681px"
        >
          <el-table-column prop="name" label="记录名称" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column prop="billNo" label="单号" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column prop="ownName" label="桥梁名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="position" label="部位" show-overflow-tooltip></el-table-column>
          <el-table-column prop="structure" label="构建编号" show-overflow-tooltip></el-table-column>
          <el-table-column prop="problemName" label="病害名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="problemNote" label="定性描述" show-overflow-tooltip></el-table-column>
          <el-table-column prop="unit" label="定量描述" show-overflow-tooltip></el-table-column>
          <el-table-column prop="image" label="照片">
            <template slot-scope="scope">
              <el-image style="width: 60px; height: 60px; margin-top: 15px" :src="scope.row.image" :preview-src-list="scope.row.images"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="发现时间" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column property="status" label="处理状态" width="120">
            <template slot-scope="scope">
              <label :class="['insp-table-label', historyStatusClass(scope.row.status)]">
                {{ historyStatusText(scope.row.status) }}
              </label>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="创建人" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="90">
            <template slot-scope="scope">
              <el-tooltip content="详情">
                <el-button type="text" icon="el-icon-document" @click="handelDetail(scope.row.id)"> </el-button>
              </el-tooltip>
              <!-- <el-tooltip content="修改">
                <el-button type="text" icon="el-icon-edit-outline" @click="handelEdit(scope.row.id)"> </el-button>
              </el-tooltip> -->
              <!-- <el-tooltip content="删除">
                <el-button type="text" icon="el-icon-delete" style="color: red !important" @click="handelDelete(scope.row.id)"> </el-button>
              </el-tooltip>  -->
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="insp-page">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="currentPage"
          :hide-on-single-page="false"
          @current-change="handlePageChange"
          :page-size="pageSize"
          :total="recordsTotal"
        >
        </el-pagination>
      </div>
    </div>

    <!--新增/编辑巡检记录-->
    <vx-popup :title="dialogTitle" width="880px" @close="cancelSubmit" :active.sync="dialogVisible" @confirmPopup="handleSubmit" @cancelPopup="cancelSubmit">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row justify="space-between" :gutter="20">
          <el-col :span="12">
            <el-form-item label="巡检任务 :" prop="task">
              <el-select v-model="ruleForm.task" placeholder="请选择巡检任务" size="small" style="width: 100%" @change="handleChangeTask" clearable>
                <el-option v-for="item in taskOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                <div style="text-align: center">
                  <el-pagination @current-change="handlePageChange_sel" :current-page.sync="currentPage_sel" :page-size="pagesize_sel" layout="prev, pager, next" :total="recordsTotal_sel">
                  </el-pagination>
                </div>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="巡检桥梁 :" prop="inspBridge">
              <el-select v-model="ruleForm.inspBridge" placeholder="请选择巡检桥梁" size="small" style="width: 100%" @change="(event) => handleBridgeChange(event)" clearable value-key="id">
                <el-option v-for="item in bridgeOptions" :key="item.id" :label="item.ownName" :value="item"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row justify="space-between" :gutter="20">
          <el-col :span="12">
            <el-form-item label="病害部位:" prop="deasePosition">
              <el-cascader
                v-model="ruleForm.deasePosition"
                :options="deasePosOptions"
                @change="handleChangeDeasePos"
                :props="{ label: 'name', value: 'value', children: 'children' }"
                size="small"
                style="width: 100%"
                placeholder="请选择病害部位"
              >
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="病害程度:" prop="deaseLevel">
              <el-select v-model="ruleForm.deaseLevel" placeholder="请选择病害程度" size="small" style="width: 100%" clearable>
                <el-option v-for="item in deaseLevelOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row justify="space-between" :gutter="20">
          <el-col :span="24">
            <el-form-item label="病害选择:" prop="dease">
              <el-button size="small" class="insp-btn-add" @click="handleAddDease">添加病害</el-button>
              <span style="display: inline-block; margin-left: 10px">{{ this.ruleForm.multipleSelection.length > 0 ? this.ruleForm.multipleSelection[0].name : '' }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row justify="space-between" :gutter="20" v-if="ruleForm.diseaseUnits.length > 0" style="padding-left: 100px">
          <el-col :span="6" v-for="(item, index) in ruleForm.diseaseUnits" :key="index">
            <el-form-item :prop="'diseaseUnits[' + index + '].value'" :rules="{ required: false, message: '必填', trigger: 'blur' }" label-width="0">
              <div style="display: inline-block">
                <el-input type="number" placeholder="请输入单位值" v-model="item.value" size="small" style="width: 60%" clearable> </el-input>
                <span> {{ item.unit }}</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row justify="space-between" :gutter="20">
          <el-col :span="24">
            <el-form-item label="病害图片:" prop="deaseImage">
              <el-upload
                :action="uploadUrl"
                list-type="picture-card"
                :file-list="fileList"
                accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG,.PNG"
                :on-preview="handlePictureCardPreview"
                :on-remove="handlePictureCardRemove"
                :on-success="handlePictureCardSuccess"
                :data="uploadParams"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogImgVisible" custom-class="image">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row justify="space-between" :gutter="20">
          <el-col :span="24">
            <el-form-item label="记录描述 :" prop="problemNote">
              <el-input type="textarea" maxlength="200" rows="3" v-model="ruleForm.problemNote" style="width: 100%"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </vx-popup>

    <!--添加病害-->
    <vx-popup
      class="deasePopup"
      title="添加病害"
      width="900px"
      @close="cancelDease"
      :active.sync="deaseDialogVisible"
      @confirmPopup="handleDeaseSubmit"
      @cancelPopup="cancelDease"
      style="z-index: 51003 !important"
    >
      <div style="height: 495px">
        <el-table
          ref="multipleTable"
          :data="tableDeaseData"
          stripe
          :header-cell-style="{
            background: '#8595B9',
            color: '#fff',
            height: '44px',
          }"
          @selection-change="handleSelectionChange"
          max-height="436px"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="type" label="类型" show-overflow-tooltip></el-table-column>
          <el-table-column prop="name" label="病害名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
        </el-table>
        <div class="insp-model-page">
          <el-pagination background layout="prev, pager, next" :current-page.sync="currentPage_dease" @current-change="handlePageChange_dease" :page-size="pageSize_dease" :total="recordsTotal_dease">
          </el-pagination>
        </div>
      </div>
    </vx-popup>

    <!--巡检记录详情-->
    <vx-popup :title="detailTitle" width="880px" @close="cancelDetail" :active.sync="detailVisible" @confirmPopup="cancelDetail" @cancelPopup="cancelDetail">
      <div class="insp-popup-detail">
        <el-row justify="space-between" :gutter="20">
          <el-col :span="12">
            <label>巡检任务 : </label>
            <span :title="detailInfo['taskName'] || ''">{{ detailInfo['taskName'] || '' }}</span>
          </el-col>
          <el-col :span="12">
            <label>巡检桥梁 : </label>
            <span :title="detailInfo['ownName'] || ''">{{ detailInfo['ownName'] || '' }}</span>
          </el-col>
        </el-row>
        <el-row justify="space-between" :gutter="20">
          <el-col :span="12">
            <label>病害部位 : </label>
            <span :title="computedPosition"> {{ computedPosition }}</span>
          </el-col>
          <el-col :span="12">
            <label>病害程度 : </label>
            <span>{{ detailInfo['ext3'] ? (JSON.parse(detailInfo['ext3'])['level'] === 0 ? '一级' : JSON.parse(detailInfo['ext3'])['level'] === 1 ? '二级' : '三级') : '' }}</span>
          </el-col>
        </el-row>
        <el-row justify="space-between" :gutter="20">
          <el-col :span="24">
            <label>病害选择 : </label>
            <span :title="detailInfo['ext6'] || ''">{{ detailInfo['ext6'] || '' }}({{ computedUnit }})</span>
          </el-col>
        </el-row>
        <el-row justify="space-between" :gutter="20">
          <el-col :span="24">
            <label>病害图片 : </label>
            <span class="imageList">
              <el-image
                style="width: 70px; height: 70px; margin-right: 5px"
                v-for="(item, index) in computedImageList"
                :key="`${index}image`"
                :src="item"
                :preview-src-list="computedImageList"
              ></el-image>
            </span>
          </el-col>
        </el-row>
        <el-row justify="space-between" :gutter="20">
          <el-col :span="24">
            <label>记录描述 : </label>
            <span class="over" :title="detailInfo['problemNote'] || ''">{{ detailInfo['problemNote'] || '' }}</span>
          </el-col>
        </el-row>
      </div>
    </vx-popup>
  </div>
</template>
<script>
import base from '@/api/base'
import { config } from 'vuedraggable'
export default {
  data() {
    var validateDease = (rule, value, callback) => {
      if (this.ruleForm.multipleSelection.length <= 0) {
        callback(new Error('请添加病害'))
      } else {
        callback()
      }
    }
    return {
      uploadParams: {},
      uploadUrl: base.UPLOADURL,
      pageSize: 6,
      currentPage: 1,
      recordsTotal: 0,
      historyName: '',
      historyStatus: '',
      historyStatusOpts: [
        {
          label: '待养护',
          value: 0,
        },
        {
          label: '养护中',
          value: 1,
        },
        {
          label: '已处理',
          value: 2,
        },
      ],
      // bridgeValue: '',
      bridgeValue: localStorage.getItem('ownId') ? localStorage.getItem('ownId') : '',
      bridgeValueMapping: '',
      bridgeOptsAll: [],
      inspType: '',
      inspTypeOpts: [],
      dialogTitle: '',
      dialogVisible: false,
      tableDeaseData: [],
      editId: '',
      tableData: [],
      bridgeOptions: [],
      taskOptions: [],
      currentPage_sel: 1,
      recordsTotal_sel: 0,
      pagesize_sel: 10,
      currentPage_dease: 1,
      recordsTotal_dease: 0,
      pageSize_dease: 6,
      deasePosOptions: [],
      deaseLevelOptions: [
        {
          label: '一级',
          value: 0,
        },
        {
          label: '二级',
          value: 1,
        },
        {
          label: '三级',
          value: 2,
        },
      ],
      dialogImageUrl: '',
      dialogImgVisible: false,
      fileList: [],
      ruleForm: {
        task: '',
        inspBridge: '',
        deasePosition: [],
        deaseLevel: '',
        dease: '',
        deaseImage: [],
        problemNote: '',
        multipleSelection: [],
        diseaseUnits: [],
      },
      rules: {
        task: [
          {
            required: true,
            message: '请选择任务',
            trigger: 'change',
          },
        ],
        inspBridge: [
          {
            required: true,
            message: '请选择巡检桥梁',
            trigger: 'change',
          },
        ],
        deasePosition: [
          {
            required: true,
            message: '请选择病害部位',
            trigger: 'change',
          },
        ],
        deaseLevel: [
          {
            required: true,
            message: '请选择病害程度',
            trigger: 'change',
          },
        ],
        dease: [
          {
            required: true,
            validator: validateDease,
            trigger: 'click',
          },
        ],
        deaseImage: [
          {
            required: true,
            message: '请选择病害图片',
            trigger: 'change',
          },
        ],
      },
      bridgeTypeId: '',
      deaseDialogVisible: false,
      diseaseValues: [],
      detailTitle: '巡检记录详情',
      detailVisible: false,
      detailInfo: {},
    }
  },
  watch: {
    $route(to, from) {
      this.queryTaskOpts(1)
      // console.log(from)
      // console.log('ssssssssssssssto')
      // this.changeBridgeStart(from)
    },
  },
  created() {
    this.queryBridgeList()
    this.queryTaskOpts(1)
    this.queryForPage(1)
  },
  methods: {
    // changeBridgeStart  YU

    changeBridgeStart() {
      this.bridgeValue = localStorage.getItem('ownId')
    },
    changeBridgeStart(form) {
      form.name == '首页' ? (this.bridgeValue = localStorage.getItem('ownId')) : (this.bridgeValue = this.bridgeValue)
      // this.bridgeValueMapping = this.

      this.queryForPage(1)
    },

    emptyForm() {
      this.$refs['ruleForm'].resetFields()
      const emptyObj = {
        task: '',
        inspBridge: '',
        deasePosition: [],
        deaseLevel: '',
        dease: '',
        deaseImage: [],
        problemNote: '',
        multipleSelection: [],
        diseaseUnits: [],
      }
      this.ruleForm = emptyObj
    },
    handleAdd() {
      this.emptyForm()
      this.editId = null
      this.dialogTitle = '新增巡检记录'
      this.dialogVisible = true
    },
    handelEdit(val) {
      this.$refs['ruleForm'].resetFields()
      this.dialogTitle = '修改巡检记录'
      this.dialogVisible = true
      this.editId = val
      this.queryHistoryById(val)
    },
    handelDetail(val) {
      this.detailTitle = '巡检记录详情'
      this.detailVisible = true
      this.$api.insp.queryHistoryById(val).then((response) => {
        this.detailInfo = response.data.data || {}
      })
    },
    handleSubmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) {
          return false
        }
        let _userInfo = JSON.parse(localStorage.getItem('userInfo'))
        const _ext2 = this.ruleForm.deasePosition[2] ? this.ruleForm.deasePosition[2].split(';')[1] : ''
        if (!_ext2) {
          this.$vs.notify({
            text: '请病害部位选择至构件！',
            color: 'danger',
          })
          return false
        }
        let _ext3 = {
          level: this.ruleForm.deaseLevel,
          deasePosition: this.ruleForm.deasePosition,
          diseaseUnits: this.ruleForm.multipleSelection.length > 0 ? this.ruleForm.multipleSelection[0]['diseaseUnits'] : '',
        }
        this.ruleForm.diseaseUnits.forEach((item, index) => {
          _ext3[`unit${index}`] = item.value
        })
        _ext3['diseaseValues'] = this.ruleForm.diseaseUnits

        let _params = {
          userId: _userInfo['userid'] || '',
          userName: _userInfo['realname'] || '',
          taskId: this.ruleForm.task.split(';')[0] || '',
          name: this.ruleForm.inspBridge['name'] || '', //巡检项名称
          problemNote: this.ruleForm.problemNote,
          taskItemId: this.ruleForm.inspBridge['id'] || '',
          ownId: this.ruleForm.inspBridge['ownId'] || '',
          ownName: this.ruleForm.inspBridge['ownName'] || '',
          ext1: this.ruleForm.deaseImage.join(';'), //图片地址
          ext2: _ext2, //构件名称
          ext4: this.ruleForm.multipleSelection.length > 0 ? this.ruleForm.multipleSelection[0].id : '', //病害
          ext3: JSON.stringify(_ext3), //病害其他json
          ext6: this.ruleForm.multipleSelection.length > 0 ? this.ruleForm.multipleSelection[0].name : '', //病害名称
        }
        if (this.editId) {
          _params.id = this.editId
        }

        if (this.editId) {
          this.$api.insp.updateHistory(_params).then((response) => {
            if (response.data.success) {
              this.$vs.notify({
                text: '修改成功',
                color: 'success',
              })
              this.dialogVisible = false
              this.queryForPage(1)
              this.fileList = []
            }
          })
        } else {
          this.$api.insp.addHistory(_params).then((response) => {
            if (response.data.success) {
              this.$vs.notify({
                text: '新增成功',
                color: 'success',
              })
              this.dialogVisible = false
              this.queryForPage(1)
              this.fileList = []
            }
          })
        }
      })
    },
    handelDelete(val) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$api.insp.deleteHistory(val).then((response) => {
            if (response.data.success) {
              this.$vs.notify({
                text: '删除成功',
                color: 'success',
                icon: 'success',
              })
              let maxPage = Math.ceil((this.recordsTotal - 1) / this.pageSize)
              if (this.currentPage > maxPage) {
                this.currentPage = maxPage
              }
              this.handlePageChange(this.currentPage)
            } else {
              this.$vs.notify({
                text: '删除失败',
                color: 'danger',
              })
            }
          })
        })
        .catch(() => {
          this.$vs.notify({
            text: '已取消删除',
            color: 'primary',
          })
        })
    },
    queryForPage(pageIndex) {
      let _userInfo = JSON.parse(localStorage.getItem('userInfo'))
      if (pageIndex && pageIndex === 1) {
        this.currentPage = 1
      }
      const _params = {
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        data: {
          name: this.historyName,
          status: this.historyStatus,
          ownId: this.bridgeValue,
          userId: _userInfo['userid'] || '',
        },
      }
      this.$api.insp.queryHistoryPage(_params).then((response) => {
        if (response.data.success) {
          this.tableData = response.data.data.map((item) => {
            let _position = ''
            if (item.ext3) {
              _position = `${JSON.parse(item.ext3)['deasePosition'][0].split(';')[1]}/${JSON.parse(item.ext3)['deasePosition'][1].split(';')[1]}`
            }
            let _unit = item.ext3 ? JSON.parse(item.ext3)['diseaseValues'] : []
            let _images = item.ext1 ? item.ext1.split(';') : []
            return {
              ...item,
              problemName: item.ext6 || '',
              billNo: item.billNo,
              position: _position,
              structure: item.ext2 || '',
              unit: _unit ? _unit.map((temp) => `${temp.value}${temp.unit} `) : '',
              image: _images.length > 0 ? `${base.DOWNLOADURL}/${_images[0]}` : '',
              images: _images.map((temp) => `${base.DOWNLOADURL}/${temp}`),
            }
          })
          this.recordsTotal = response.data.recordsTotal
        }
      })
    },
    queryHistoryById(val) {
      this.$api.insp.queryHistoryById(val).then((response) => {
        const _data = response.data.data || {}
        const _multipleSelection = [
          {
            id: _data.ext4,
            name: _data.ext3 ? (JSON.parse(_data.ext3)['name'] ? JSON.parse(_data.ext3)['name'] : '') : '',
            diseaseUnits: _data.ext3 ? (JSON.parse(_data.ext3)['diseaseUnits'] ? JSON.parse(_data.ext3)['diseaseUnits'] : '') : '',
          },
        ]
        let _ruleForm = {
          task: _data.taskId,
          inspBridge: {
            name: _data['name'] || '',
            ownId: _data['ownId'] || '',
            id: _data['taskItemId'] || '',
            ownName: _data['ownName'] || '',
          },
          problemNote: _data.problemNote,
          deaseLevel: _data.ext3 ? (JSON.parse(_data.ext3)['level'] ? JSON.parse(_data.ext3)['level'] : 0) : '',
          multipleSelection: _multipleSelection,
          deasePosition: _data.ext3 ? (JSON.parse(_data.ext3)['deasePosition'] ? JSON.parse(_data.ext3)['deasePosition'] : []) : [],
          deaseImage: _data.ext1 ? _data.ext1.split(';') : [],
          diseaseUnits: _data.ext3 ? (JSON.parse(_data.ext3)['diseaseValues'] ? JSON.parse(_data.ext3)['diseaseValues'] : []) : [],
        }
        this.fileList = _ruleForm.deaseImage.map((item) => ({
          filePath: item,
          url: `${base.DOWNLOADURL}/${item}`,
        }))
        this.ruleForm = _ruleForm
        this.diseaseValues = _data.ext3 ? (JSON.parse(_data.ext3)['diseaseValues'] ? JSON.parse(_data.ext3)['diseaseValues'] : []) : []
        this.uploadParams = {
          ownId: _data.ownId,
        }
        this.handleChangeTask(_ruleForm.task)
        this.handleBridgeChange(_ruleForm.inspBridge)
        this.queryDiseaseByStructureId(1)
      })
    },
    queryTaskOpts(pageIndex) {
      if (pageIndex && pageIndex === 1) {
        this.currentPage_sel = 1
      }
      const _params = {
        pageSize: this.pagesize_sel,
        pageNum: this.currentPage_sel,
      }
      this.$api.insp.queryTaskPage(_params).then((response) => {
        if (response.data.success) {
          this.taskOptions = response.data.data
          this.recordsTotal_sel = response.data.recordsTotal
        }
      })
    },
    queryDiseaseByStructureId(pageIndex) {
      if (pageIndex && pageIndex === 1) {
        this.currentPage_dease = 1
      }
      const _params = {
        pageNum: this.currentPage_dease,
        pageSize: this.pageSize_dease,
        structureId: this.ruleForm.deasePosition[1].split(';')[0],
      }
      this.$api.bridge.queryDiseaseByStructureId(_params).then((response) => {
        if (response.data.success) {
          this.tableDeaseData = response.data.data[0]

          if (!this.editId) {
            this.ruleForm.multipleSelection = []
          } else {
            if (this.ruleForm.multipleSelection && this.ruleForm.multipleSelection.length > 0) {
              this.ruleForm.multipleSelection.forEach((item) => {
                this.tableDeaseData.forEach((row) => {
                  if (row.id === item.id) {
                    this.$nextTick(() => {
                      this.$refs.multipleTable.toggleRowSelection(row, true)
                      this.ruleForm.diseaseUnits = this.diseaseValues
                    })
                  }
                })
              })
            }
          }
        }
      })
    },
    deepDeasePosOptions(data) {
      let _arr = []
      let _obj = {}
      data.forEach((item) => {
        const _tmp = {
          ...item,
        }
        if (_tmp.children && _tmp.children.length > 0) {
          _tmp.children = this.deepDeasePosOptions(_tmp.children)
        }
        _obj = {
          id: _tmp.id,
          name: _tmp.name,
          value: `${_tmp.id};${_tmp.name}`,
        }
        if (_tmp.children && _tmp.children.length > 0) {
          _obj.children = _tmp.children
        }
        _arr.push(_obj)
      })
      return _arr
    },
    queryConstructionModelTreeById(_params) {
      this.$api.bridge.queryStructuralElementTree(_params).then((response) => {
        if (response.data.success) {
          this.deasePosOptions = this.deepDeasePosOptions(response.data.data.children)
        }
      })
    },
    handlePageChange(currentPage) {
      this.currentPage = currentPage
      this.queryForPage()
    },
    handlePageChange_sel(currentPage) {
      this.currentPage_sel = currentPage
      this.queryTaskOpts()
    },
    handlePageChange_dease(currentPage) {
      this.currentPage_sel = currentPage
      this.queryDiseaseByStructureId()
    },
    handleChangeTask(val) {
      this.$api.insp.queryTaskById(val.split(';')[0]).then((response) => {
        const _data = response.data.data
        this.bridgeOptions = _data.itemList
      })
    },
    handleBridgeChange(event) {
      this.uploadParams = {
        ownId: event['ownId'] || '',
      }
      this.$api.bridge
        .queryBridgeBasicById({
          bridgeId: event['ownId'] || '',
        })
        .then((response) => {
          const _bridgeTypeId = response.data.data[0][0].bridgeTypeId
          const _params = {
            bridgeTypeId: _bridgeTypeId,
            pId: '-1',
            bridgeId: event['ownId'] || '',
          }
          this.queryConstructionModelTreeById(_params)
        })
    },
    handleChangeDeasePos(val) {
      this.ruleForm.deasePosition = val
    },
    handlePictureCardRemove(file, fileList) {
      this.handleFileChange(fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogImgVisible = true
    },
    handlePictureCardSuccess(res, file, fileList) {
      this.handleFileChange(fileList)
    },
    handleFileChange(fileList) {
      let _pathList = []
      if (fileList && fileList.length > 0) {
        fileList.forEach((item) => {
          if (item.response) {
            if (item.response.code === 200) {
              let _files = item.response.data.successFiles
              if (_files) {
                const _filePath = _files[0].filePath
                const _name = _files[0].originalFileName
                _pathList.push(_filePath)
              }
            }
          } else if (item.status === 'success') {
            _pathList.push(item.filePath)
          }
        })
      }
      this.$set(this.ruleForm, 'deaseImage', _pathList)
    },
    cancelSubmit() {
      this.dialogVisible = false
      this.fileList = []
    },
    handleAddDease() {
      if (this.ruleForm.deasePosition.length <= 0) {
        this.$vs.notify({
          text: '请先选择病害部位！',
          color: 'danger',
        })
        return false
      }
      this.queryDiseaseByStructureId(1)
      this.deaseDialogVisible = true
    },
    handleSelectionChange(val) {
      this.ruleForm.multipleSelection = val.map((item) => {
        const _deaseUnits = item['diseaseUnits'] ? item['diseaseUnits'].split(';') : []
        this.ruleForm.diseaseUnits = _deaseUnits.map((item) => {
          return {
            unit: item,
            value: 0,
          }
        })
        return {
          id: item.id,
          name: item.name,
          diseaseUnits: item.diseaseUnits,
        }
      })
    },
    handleDeaseSubmit() {
      if (this.ruleForm.multipleSelection && this.ruleForm.multipleSelection.length > 1) {
        this.$vs.notify({
          text: '病害只能选择一条',
          color: 'danger',
        })
        return false
      }
      this.deaseDialogVisible = false
    },
    cancelDease() {
      this.deaseDialogVisible = false
    },
    cancelDetail() {
      this.detailVisible = false
    },
    queryBridgeList() {
      this.$api.bridge.AllTheBridges().then((response) => {
        if (response.data.success) {
          this.bridgeOptsAll = response.data.data[0]
        }
      })
    },
    historyStatusClass(type) {
      switch (type) {
        case 0:
          return 'inspTypeA'
        case 1:
          return 'inspTypeB'
        case 2:
          return 'inspTypeC'
      }
    },
    historyStatusText(type) {
      switch (type) {
        case 0:
          return '待养护'
        case 1:
          return '养护中'
        case 2:
          return '已处理'
      }
    },
  },
  computed: {
    computedUnit() {
      let _diseaseUnits = this.detailInfo['ext3'] ? JSON.parse(this.detailInfo['ext3'])['diseaseValues'] : []
      let _string = _diseaseUnits ? _diseaseUnits.map((item) => `${item.value} ${item.unit}`).join(' ') : ''
      return _string
    },
    computedPosition() {
      let _deasePosition = this.detailInfo['ext3'] ? JSON.parse(this.detailInfo['ext3'])['deasePosition'] : []
      let _string = _deasePosition ? _deasePosition.map((item) => `${item.split(';')[1]}`).join('/') : ''
      return _string
    },
    computedImageList() {
      let _list = this.detailInfo['ext1'] ? this.detailInfo['ext1'].split(';') : []
      return _list.map((item) => `${base.DOWNLOADURL}/${item}`)
    },
  },
}
</script>
<style lang="scss">
.el-image-viewer__close {
  top: 40px;
  right: 250px !important;
  width: 45px !important;
  height: 45px !important;
  font-size: 43px !important;
}
.el-image-viewer__img {
  max-height: 85% !important;
  max-width: 85% !important;
}
</style>
<style scoped lang="scss">
@import './insp.scss';

/deep/.el-table__header tr,
/deep/.el-table__header th {
  padding: 0;
  height: 44px;
}

/deep/.el-table td,
/deep/.el-table th {
  text-align: center;
  font-size: 14px;
}

/deep/.el-table th {
  font-weight: 500;
  color: #fff;
}

/deep/.el-table td {
  font-weight: 400;
  color: #444;
  padding: 0;
  height: 44px;
  line-height: 44px;
}

/deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #f1f5fc;
}

/deep/.el-upload--picture-card {
  width: 70px;
  height: 70px;
  line-height: 74px;
}

/deep/.el-upload-list--picture-card .el-upload-list__item {
  width: 72px;
  height: 72px;
}

/deep/.el-dialog.image {
  background: #fff;
  width: 900px;
  max-height: 700px;
  overflow-y: scroll;
  margin-top: 10vh !important;
}

/deep/.el-dialog__body {
  width: 100%;
  height: 100%;
}
</style>
